昨天我們已經介紹了隱式動畫，今天我們要來介紹顯式動畫。

顯式動畫

顯式動畫是指在 Flutter 中通過更細粒度的控制來管理動畫的進行過程。與隱式動畫不同，顯式動畫通常需要手動管理動畫的開始、停止、速度和進度等細節，這種方法適合更複雜的動畫場景。

• AnimationController
  顯式動畫的核心，負責控制動畫的時間軸。可以使用它來啟動、停止、反向或控制動畫的進度。

late AnimationController _controller;

@override
void initState() {
  super.initState();
  
  _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this, // 需要使用 SingleTickerProviderStateMixin
  );
  
  _controller.forward(); // 啟動動畫
}

@override
void dispose() {
  _controller.dispose(); // 確保在銷毀時釋放資源
  super.dispose();
}

• Animation
  是用來描述動畫的插值器，它可以生成不同的範圍值，通常與 AnimationController 結合使用。

late Animation<double> _animation;

@override
void initState() {
  super.initState();

  _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);

  _controller.forward();
}

• CurvedAnimation
  是一種特殊的動畫，使用曲線來改變動畫的速度。

late Animation<double> _curvedAnimation;

@override
void initState() {
  super.initState();

  _curvedAnimation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeInOut,
  );
}

• AnimatedBuilder
  是一個重用動畫代碼的 widget。它可以將動畫邏輯和 UI 分開。

AnimatedBuilder(
  animation: _animation,
  builder: (context, child) {
    return Opacity(
      opacity: _animation.value,
      child: child,
    );
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
);

我們明天見~